<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>01-媒体查询类型</title>
		<style>
			h1 {
				width: 600px;
				height: 400px;
				line-height: 400px;
				background-image: linear-gradient(30deg, red, yellow, green);
				margin: 0 auto;
				text-align: center;
				font-size: 100px;
				color: #fff;
				text-shadow: 0 0 10px #000;
			}

			/* 媒体类型: print 打印机 screen 屏幕 all 所有设备  */

			/* 只有在打印机或打印预览才应用的样式 */
			@media print {
				h1 {
					background-image: none;
				}
			}

			/* 只有在屏幕上才应用的样式 */
			@media screen {
				h1 {
					font-family: '宋体';
				}
			}

			/* 一直都应用的样式 */
			@media all {
				h1 {
					color: red;
				}
			}
		</style>
	</head>
	<body>
		<h1>新年快乐</h1>
	</body>
</html>
